// 颜色容器
const container = document.querySelector(".colors");
// 颜色按钮配置项
const colors = [
  "#3aa757",
  "#e8453c",
  "#f9bb2d",
  "#4688f1",
  "#e22aa5",
  "#c81aeb",
  "#a2eb1a",
  "#1ae4eb",
];

//? 注意这里获取数据是异步进行
chrome.storage.sync.get("bgColor", function (data = {}) {
  const { bgColor = "#fff" } = data;
  constructOption(colors, bgColor);
});

// 设置全局颜色
function constructOption(colors, defalutBgColor) {
  for (let bgColor of colors) {
    const span = document.createElement("span");
    span.style.backgroundColor = bgColor;
    span.className = "color";
    if (bgColor === defalutBgColor) {
      span.classList.add("active");
    }
    // 监听颜色按钮改变时存储颜色值
    span.addEventListener("click", () => {
      chrome.storage.sync.set({ bgColor }, function () {
        const dom = document.querySelector(".active");
        dom && dom.classList.remove("active"); // 删除已激活样式
        span.classList.add("active");
        console.log("😄 Set backgroundColor Success～");
      });
    });
    container.appendChild(span);
  }
}
